<template>
  <div>
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-select v-model="value" size="mini" @change="changeOption">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div v-if="!loading" class="exam-list">
      <el-table :data="tableData" size="mini" header-row-class-name="table-header">
        <el-table-column label="试卷名称" width="240">
          <template slot-scope="scope">
            <div class="exam-title">
              <div class="ellipsis">{{ scope.row.paper_title }}</div>
              <div class="tag" v-if="scope.row.answer_times > 1">
                第{{ scope.row.answer_times }}次作答
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="套卷名称" width="200" v-if="value == 4">
          <template slot-scope="scope">
            <div class="ellipsis">{{ scope.row.rollup_title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="课程名称" width="180" v-if="value == 5">
          <template slot-scope="scope">
            <div class="ellipsis">{{ scope.row.course_title }}</div>
          </template>
        </el-table-column>
        <el-table-column label="总题数" v-if="value == 4">
          <template slot-scope="scope">
            {{ `${scope.row.topic_count}题` }}
          </template>
        </el-table-column>
        <el-table-column label="得分" v-if="$util.inArray(value, [3, 5, 6])">
          <template slot-scope="scope">
            {{ `${scope.row.user_score}分` }}
          </template>
        </el-table-column>
        <el-table-column label="答对题数">
          <template slot-scope="scope">
            {{ `${scope.row.right_count}题` }}
          </template>
        </el-table-column>
        <el-table-column label="是否合格" v-if="value == 5">
          <template slot-scope="scope">
            <span :class="scope.row.pass === 1 ? 'correct' : 'error'">
              {{ scope.row.pass === 1 ? '合格' : '不合格' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.commit_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="50">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EduPagination
      v-if="!loading"
      @handleCurrentChange="handleCurrentChange"
      align="right"
    ></EduPagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/exam/my_exams',
          title: '考试记录'
        },
        {
          path: '/my/exam/wrong',
          title: '错题本'
        }
      ],
      options: [
        {
          value: 3,
          label: '公开考试'
        },
        {
          value: 4,
          label: '套卷练习'
        },
        {
          value: 5,
          label: '课程考试'
        },
        {
          value: 6,
          label: '派发考试'
        }
      ],
      value: 3,
      loading: true,
      tableData: [],
      rollupList: [],
      courseList: [],
      routePath: this.$route.path
    }
  },
  created() {
    this.getExamRecordList()
  },
  methods: {
    getExamRecordList() {
      this.$api.getExamRecordList(
        {
          type: this.value,
          page: this.$store.getters['paginate/page'],
          count: 12
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getExamRecordList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.tableData = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 12,
        total: data.total
      })
      setTimeout(() => {
        this.loading = false
      }, 200)
    },
    changeOption(val) {
      this.loading = true
      this.value = val
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleCurrentChange()
    },
    handleClick(item) {
       this.$router.push({
        path: '/exam/paper/parsing',
        query: {
          id: item.id,
          type: this.value
        }
      })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.exam-list {
  margin-top: 20px;
  .el-table {
    ::v-deep .table-header th {
      background-color: #f6f9ff;
    }
  }
  .exam-title {
    display: flex;
    align-items: center;
  }
  .ellipsis {
    @include ellipsis();
  }
  .tag {
    margin-left: 5px;
    padding: 4px 5px;
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    line-height: 17px;
    background: #efefef;
    border-radius: 2px;
    white-space: nowrap;
  }
  .correct {
    color: $text-color-free;
  }
  .error {
    color: $text-color-error;
  }
}
</style>
